<template>
  <ul class="MyList">
    <MyItem v-for="item in todos" :todo="item" :key="item.key"></MyItem>
  </ul>
</template>

<script>
import { mapState } from 'vuex'
import MyItem from './MyItem.vue'

export default {
  name: 'MyList',
  components: {
    MyItem
  },
  data() {
    return {
      // datas: ['打代码', '吃饭', '睡觉']
      // datas: [
      //   { key: '1', value: '打代码', isdone: false },
      //   { key: '2', value: '吃饭', isdone: false },
      //   { key: '3', value: '睡觉', isdone: true }
      // ]
    }
  },
  computed: {
    ...mapState('todoData', {todos:'todos'})
  },
  methods: {}
}
</script>

<style scoped lang="less">
.MyList {
  background-color: white;
  border-radius: 6px;
  padding-left: 3px;
  text-align: left;
  margin-top: 10px;
  // height: 60%;
  box-shadow: 0px 0px 20px 1px rgba(90, 90, 90, 0.2);
}
</style>
